import React, { Component } from 'react'
import './App.css'
import Header from './Components/Header'
import List from './Components/List'
import Footer from './Components/Footer'

class App extends Component {
    state = {
        todoList: [
            {
                id: '1', done: true, todoName: '好好学习'
            }, {
                id: '2', done: false, todoName: '减肥'
            }, {
                id: '3', done: false, todoName: 'Coding'
            }
        ]
    }

    render() {
        const {todoList} = this.state
        return (<div className="todo-container">
            <div className="todo-wrap">
                <Header addTodo={this.addTodo}></Header>
                <List
                    todoList={todoList}
                    upDateTodo={this.upDateTodo}
                    deleteTodo={this.deleteTodo}
                ></List>
                <Footer deleteDoneAll={this.deleteDoneAll} checkedAll={this.checkedAll} todoList={todoList}></Footer>
            </div>
        </div>)
    }

    addTodo = (todo) => {
        const newTodoList = [todo, ...this.state.todoList]
        this.setState({
            todoList: newTodoList
        })
    }

    upDateTodo = (id, done) => {
        const {todoList} = this.state
        const newTodoList = todoList.map(todo => {
            if (todo.id === id) {
                return {...todo, done}
            } else {
                return {...todo}
            }
        })
        this.setState({todoList: newTodoList})
    }

    deleteTodo = (id) => {
        const {todoList} = this.state
        const newTodoList = todoList.filter(todo => todo.id !== id)
        this.setState({
            todoList: newTodoList
        })
    }

    checkedAll = (done) => {
        const {todoList} = this.state
        const newTodoList = todoList.map(todo => {
            return {...todo, done}
        })
        this.setState({
            todoList: newTodoList
        })
    }

    deleteDoneAll = () => {
        const {todoList} = this.state
        const newTodoList = todoList.filter(todo => !todo.done)
        this.setState({
            todoList: newTodoList
        })
    }
}

export default App
